<template>
  <el-row :gutter="0">
    <el-col :span="24" class="hyperos-core-container">
      <div class="hypero-core-content">
        <div class="core-title">
          <p class="english-text">Xiaomi HyperCore</p>
          <p class="chinese-text">小米自研底层内核技术平台</p>
        </div>
        <div class="core-desc">
          <ul class="core-desc-list">
            <li
              class="core-desc-item"
              v-for="line of descriptions"
              :key="line.id"
              @click="openCoreModal(line)"
            >
              <img class="core-desc-img" :src="line.image_url" alt="" />
              <p class="core-desc-text">{{ line.core_title }}</p>
              <p class="core-desc-detail" v-html="line.core_desc"></p>
            </li>
          </ul>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
  interface Desciption {
    id: number;
    image_url: string;
    core_title: string;
    core_desc: string;
  }

  const descriptions: Array<Desciption> = [
    {
      id: 1,
      image_url:
        "https://cia.hyperos.mi.com/hyperos2-homepage/core-1_2.png?imageMogr2/thumbnail/400x/quality/80/format/webp",
      core_title: "性能",
      core_desc:
        "<span>深入微架构领域<br/> 重构调度器、内存、I/O资源管理<br/> 打造单端最强性能<br/> </span>",
    },
    {
      id: 2,
      image_url:
        "https://cia.hyperos.mi.com/hyperos2-homepage/core-2_2.png?imageMogr2/thumbnail/400x/quality/80/format/webp",
      core_title: "图形",
      core_desc:
        "<span>重塑渲染管线，结合异构计算<br/> 实现业内领先的动视效果<br/> </span>",
    },
    {
      id: 3,
      image_url:
        "https://cia.hyperos.mi.com/hyperos2-homepage/core-3_2.png?imageMogr2/thumbnail/400x/quality/80/format/webp",
      core_title: "网络",
      core_desc:
        "<span>蓝牙、Wi-Fi、5G领域<br/> 持续技术突破，提供全场景<br/> 无死角网络连接保障<br/> </span>",
    },
    {
      id: 4,
      image_url:
        "https://cia.hyperos.mi.com/hyperos2-homepage/core-4_2.png?imageMogr2/thumbnail/400x/quality/80/format/webp",
      core_title: "安全",
      core_desc:
        "<span>硬件芯片级安全系统 <br/> 建设最高等级安全体系<br/> </span>",
    },
  ];

  const openCoreModal = (line: Desciption) => {
    console.log(line, "line");
  };
</script>

<style lang="scss" scoped>
  @use "./../../../styles/variable.scss" as *;

  .hyperos-core-container {
    height: 100vh;
    background: $bsBlack;
  }

  .hypero-core-content {
    width: 70%;
    height: 100%;
    margin: 0px auto;
    text-align: center;
    padding: 1.5rem 0px;
  }

  .core-title {
    background: linear-gradient(90deg, #fff 20%, #d6fbfd, #ffd3ba 45%, #debdff);
    -webkit-background-clip: text; /* 裁剪背景到文字 */
    background-clip: text;
    -webkit-text-fill-color: transparent; /* 隐藏文字颜色 */
    color: transparent; /* 兼容性 */

    .english-text {
      font-size: 0.8125rem;
      font-weight: 600;
    }

    .chinese-text {
      margin-top: 0.1875rem;
      font-size: 25px;
      font-weight: 600;
      font-style: normal;
    }
  }

  .core-desc {
    height: calc(100% - 100px);
    list-style: none;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
  }

  .core-desc-list {
    height: 100%;
    list-style: none;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
  }

  .core-desc-item {
    max-width: 2.75rem;
    height: 100%;
    margin: 0px 1rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .core-desc-img {
    width: 150%;
    height: auto;
    object-fit: cover;
  }

  .core-desc-text {
    font-size: 0.35rem;
    color: $bsWhite;
    font-weight: normal;
    margin-top: 0.5rem;
  }

  .core-desc-detail {
    margin-top: 0.25rem;
    color: #ffffff99;
    font-size: 0.2rem;
  }

  .core-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    border: 1px solid red;
  }
</style>
